iT邦幫忙

2021 iThome 鐵人賽

DAY 24
0
Modern Web

30天學網頁設計系列 第 24

Day24 jQuery 基本教學(四)

  • 分享至 

  • xImage
  •  

CSS 與特效

JQ 的特效主要是協助快速控制 CSS,包含控制了你的 display 做顯示或隱藏,或是淡入淡出 opacity 變化等等。另外還有所謂的 animate,幫你做 keyframe 上的 from 到 to 的過渡效果。

特效運作 說明
.show() 同等顯示,CSS 不符合 display:none
.hide() 同等隱藏,CSS 符合 display:none
.Toggle() 前兩者之互斥交換
.fadeIn(speed)、.fadeOut(speed)、.fadeToggle(speed)、.fadeTo(speed,opacity) 淡入淡出效果,等於 CSS 變化速度+透明度值
.slideDown(speed,callback)、.slideUp(speed,callback)、.slideToggle(speed,callback) 滑入滑出效果,等於 CSS 變化速度+高度值
.delay(speed) 延遲特效觸發時間
.stop() 停止此 selector 正發生的特效
.animate(css,speed) 以 frame 方式去產生 CSS 變化,支援 JSON(多筆 CSS)

接下來講一下邏輯控制、迴圈、函數與物件

邏輯控制

  1. (if/eles if/else)
if (number == 5) {
  console.log("number is 5");
} else if (number == 4) {
  console.log("number is 4");
} else if (number == 3) {
  console.log("number is 3");
} else if (number == 2) {
  console.log("number is 2");
} else if (number == 1) {
  console.log("number is 1");
} else {
  console.log("number is not  …
  1. switch case
switch (number) {
  case 5:    
    console.log("number is 5 "); 
    break;   
  case 4: 
    console.log("number is 4 "); 
    break;
  case 3: 
    console.log("number is 3 ");
    break;
  case 2: 
    console.log("number is 2 "); 
    break;
  case 1: 
    console.log("number is 1 "); 
    break;
  default:
    console.log("number is not 1 to 5");
}

迴圈控制

  1. while
var times = 1;          
while (times < 5) {    
  console.log(times);  
  times++;            
}
  1. do while
var times = 1;    
do {                   
  console.log(times);   
  times++;             
} while (times < 5)
  1. while-Array
var nums = [1, 3, 5, 7, 9];
var i = 0;
while (i < nums.length) {
  console.log(nums[i]);  // 1, 3, 5, 7, 9
  i++;
}
  1. For
function print(value, key) { console.log(value); }
var map = new Map();
map.set('name', 'Arch');
map.set('age', 29);
map.set('job', 'Engineer');
map.forEach(print);  
var map = new Map();
map.set("name", "Arch");
map.set("age", "29");
map.set("job", "engineer");
for (let [key, value] of map) {
  console.log(key + " : " + value);}
//console顯示 "name : Arch", "age : 29", "job : engineer"

接下來介紹一下這幾年的熱門插件

  • Tilted page scroll
    往下滑動照片的時候可以有3D的特效
  • SVGMagic
    讓你可以在網頁中使用svg向量圖
  • Owl Carousel
    最簡單達成圖片輪播的插件
  • fullPage
    整頁下滑的插件,建立整頁瀏覽的效果
  • multiScroll
    整夜瀏覽 只是滑動效果更炫
  • Splitchar
    字體特效
  • BootstrapValidator、form validation jQuery plugin
    搭配form建立驗證機制
  • prettySocial
    實用! 直接建立社群分享button

上一篇
Day23 jQuery 基本教學(三)
下一篇
Day25 工具介紹:Bootstrap(一)
系列文
30天學網頁設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言